<template>
	<view>
		<view style="height: 160rpx;box-sizing:border-box; padding-top: 81rpx;border-bottom: 2rpx solid #F7F7F7;display: flex;">
			<image @click="backTo()" src="/static/shequ/fh.png" style="margin: 0 259rpx 0 30rpx; width: 18rpx;height: 32rpx;" mode="aspectFit" ></image>
			<text style="font-size: 32rpx;">外卖</text>
		</view>
		<view style="display: flex;">
			<!-- 选择栏 -->
			<view class="list">
				<view v-for="(sp, index) in sp" class="sp" :key="index" :class="{ active: spIndex === index }" @click="listIndex(index)">{{ sp }}</view>
			</view>
			<!-- 商品列表区域 -->
			<scroll-view scroll-y="true">
				<view v-if="spIndex === 3" style="display: flex;margin-bottom: 30rpx;" v-for="(item, index) in 4">
					<view style="width: 168rpx;height: 168rpx;background-color: #F7F7F7;display: flex;align-items: center;justify-content: center;border-radius: 10rpx;">
						<image src="/static/index/2.png" style="width: 136rpx;height: 105rpx;" mode="aspectFit"></image>
					</view>
					<view style="margin-left: 20rpx;margin-top: -20rpx;">
						<view style="display: flex;line-height: 40rpx; flex-direction: column;font-size: 24rpx;color: #999999;">
							<text style="font-size: 30rpx;color: #1B1B1B;margin-top: 14rpx;">好多个柠檬</text>
							<text style="width: 354rpx; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">
								好吃水份多又大的柠檬正宗柠檬好吃水份多又大的柠檬正宗柠檬
							</text>
							<view>
								<text style="margin-right: 10rpx;">月售 256</text>
								<text>好评率100%</text>
							</view>
						</view>
						<view style="display: flex;align-items: center;	margin-top: 15rpx;">
							<view>
								<text style="font-size: 24rpx;color: #F61B00;">¥</text>
								<text style="font-size: 36rpx;color: #F61B00;">14.5</text>
								<text style="font-size: 24rpx;color: #B4B4B4;text-decoration: line-through;">¥20.5</text>
							</view>
							<text
								@click="open"
								style="margin-left: 100rpx; display: flex;align-items: center;justify-content: center; width: 120rpx;height: 46rpx;background-color:#FFD333;border-radius: 23rpx;color: #1B1B1B;font-size: 24rpx;"
							>
								抢购
							</text>
						</view>	
						<uni-popup ref="popup" type="bottom" >
							<view style="height: 749rpx;border-radius: 30rpx 30rpx 0 0;background-color: #fff;">
								<image src="/static/login/qx.png" style="width: 24rpx;height: 30rpx;margin: 24rpx 30rpx 0 690rpx;" mode="aspectFit"></image>
								<view style="display: flex;">
									<image
										src="/static/meishi/2.png"
										style="width: 200rpx;height: 200rpx;border-radius: 15rpx;margin: 40rpx 30rpx 42rpx;"
										mode="aspectFill"
									></image>
									<view style="margin-top: 50rpx ;">
										<text style="font-size: 36rpx;">无菌鸡蛋</text>
										<view style="display: flex;align-items: center;	margin-top: 50rpx;">
											<text style="font-size: 24rpx;color: #F61B00;">¥</text>
											<text style="font-size: 36rpx;color: #F61B00;">14.5</text>
											<text style="font-size: 24rpx;color: #B4B4B4;text-decoration: line-through;">¥20.5</text>
										</view>
										<text style="font-size: 24rpx;" >已选：500g/份</text>
									</view>
								</view>
								<view style="margin-left: 30rpx;">
									<text style="font-size: 26rpx;color: #979797;">规格</text>
									<view style="display: flex;">
										<view class="spec" v-for="(item, index) in ['500g/份','200g/份']" :key="index" :class="{'specifi': changeIndex === index}"  @click="clickBtn(index)">
											{{item}}
										</view>
									</view>
								</view>
								<view style="display: flex;justify-content: space-between;margin: 60rpx 30rpx;">
									<text style="font-size: 26rpx;color: #979797;">购买数量</text>
									<view style="display: flex;">
										<image src="/static/shequ/减@2x.png" :disabled="subState" @click="sub" style="width: 45rpx;height: 44rpx;" mode="aspectFit"></image>
										<input type="text" :value="num" style="width: 40rpx;text-align: center;" />
										<image src="/static/shequ/加%20(1)@2x.png" class="addState" @click="add" style="width: 45rpx;height: 44rpx;" mode="aspectFit"></image>
									</view>
								</view>
								<button type="default" style="height: 110rpx;background-color: #688517;font-size: 32rpx;color: #fff;display: flex;justify-content: center;align-items: center;">确定</button>
							</view>						
						</uni-popup>
					</view>
					
				</view>
			</scroll-view>
		</view>
		<view style="height: 110rpx;display: flex;justify-content: space-between;position: fixed;bottom: 0;left: 0;">
			<view style="display: flex;width: 510rpx;justify-content: space-between;align-items: center;" @click="showData">
				<view style="padding-left: 30rpx; display: flex;align-items: center;">
					<image src="/static/waimai/图层1@2x.png" style="width: 40rpx;height: 39rpx;" mode="aspectFit"></image>
					<text style="font-size: 24rpx;color: #1B1B1B;margin-left: 10rpx;">已选（25）</text>
				</view>
				<text style="font-size: 20rpx;font-weight: bold;color: #F61B00;padding-right: 30rpx;">¥256.23</text>
			</view>
			<button
				type="default"
				style="width: 240rpx;background-color: #00C657;color: #fff;font-size: 32rpx;display: flex;align-items: center;justify-content: center;border-radius: 0;">
				去支付
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:1,
				spIndex: 3,
				changeIndex:0,
				sp: ['精美礼盒', '营养乳品', '时令蔬菜', '新鲜蔬果', '肉蛋家禽', '精美礼盒', '营养乳品', '时令蔬菜', '新鲜蔬果', '肉蛋家禽']
			};
		},
		
		methods:{
			sub() {
				if (this.num <= 1) {
					this.subState = false;
				} else {
					this.num--;
				}
			},
			add() {
				this.num++;
			},
			listIndex(index) {
				this.spIndex = index;
			},
			open: function() {
				this.$refs.popup[0].open();
			},
			clickBtn(index){
				this.changeIndex=index;
			}
		}
	}
</script>

<style lang="scss">
.specifis{
	border: 2rpx solid #688517;
	color: #688517;
}
.spec{
	width: 200rpx;
	height: 54rpx;
	font-size: 30rpx;
	color: #666666;
	border: 2rpx solid #E8E8E8;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 30rpx;
	margin-top: 30rpx;
}
.list .active {
	background-color: #fff;
	color: #1b1b1b;
}
.sp {
	width: 141rpx;
	height: 99rpx;
	background-color: #f7f7f7;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #999999;
	margin-right: 14rpx;
}
</style>
